<template>
  <view class="page">
    <scroll-view
        style="height: 100%"
        scroll-y="true"
        :scroll-into-view="id"
        scroll-with-animation="true"
    >
      <view class="detail-container">
        <!-- 同背景色空白占位符 -->
        <view class="top-blank"></view>
        <view class="main-container">
          <view class="keyMsg">
            <view class="concert-introdBox">
              <view class="flexbox">
                <view class="poster">
                  <img
                      class="imgUrl"
                      :src="performanceInfo.performanceCoverUrl"
                      alt=""
                  />
                </view>

                <view class="introduction">
                  <view class="intro-text"
                  >{{ performanceInfo.performanceTitle }}
                  </view>
                  <view class="sold-status">
                    <uni-tag
                        :inverted="true"
                        :circle="true"
                        size="normal"
                        :text="
                        valueOf(performanceInfo.performanceStatus).chineseName
                      "
                        :type="
                        valueOf(performanceInfo.performanceStatus).showType
                      "
                    />
                  </view>
                  <view
                      class="discount"
                      v-if="performanceInfo.maxDiscount !== 100"
                  >
                    {{ discountPercentage(performanceInfo.maxDiscount) + "起" }}
                  </view>
                  <view class="price">
                    ￥{{ performanceInfo.minPrice }}-￥{{
                      performanceInfo.maxPrice
                    }}
                  </view
                  >
                </view>
              </view>
              <view class="beginTime">
                <view class="icon">
                  <img
                      class="iconUrl"
                      src="../../static/icons/clock.png"
                      alt=""
                  />
                </view>
                {{ formatDateTime2WeekDate(performanceInfo.showTime) }}
              </view>
            </view>
            <view class="address-box">
              <view class="areaName">
                <view class="icon">
                  <img class="iconUrl" src="../../static/icons/adr.png" alt=""
                  /></view>
                {{ performanceInfo.venueCity }} |
                {{ performanceInfo.venueName }}
              </view>
              <view class="detail">{{ performanceInfo.venueLocation }}</view>
            </view>
            <view class="serve-notice">
              服务
              <view class="ntxt">
                <img
                    class="icon"
                    src="../../static/icons/notice.png"
                    alt=""
                />不支持退
              </view>
              <view class="ntxt">
                <img class="icon" src="../../static/icons/support.png" alt=""/>
                电子票
              </view>
              <view class="ntxt"
              ><img
                  class="icon"
                  src="../../static/icons/support.png"
                  alt=""
              />
                纸质纪念票
              </view>
            </view>
          </view>
          <view class="rate-box">
            <view class="left">
              <view class="rate-title">熊熊评分</view>
              <view class="scoreBox">
                <view class="number">{{
                    performanceScore.score == 0 ? "--" : performanceScore.score
                  }}
                </view>
                <view class="star"
                >
                  <uni-rate
                      :touchable="false"
                      :value="Math.round(performanceScore.score)"
                      size="13"
                  />
                </view>
              </view>
            </view>
            <view class="right">
              <view class="row">
                <view class="star-rating">
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                </view>
                <view class="processing"
                >
                  <progress
                      :percent="performanceScore.proportionOfScore[4]"
                      stroke-width="6"
                      border-radius="3"
                  />
                </view>
              </view>
              <view class="row">
                <view class="star-rating">
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                </view>
                <view class="processing"
                >
                  <progress
                      :percent="performanceScore.proportionOfScore[3]"
                      stroke-width="6"
                      border-radius="3"
                  />
                </view>
              </view>
              <view class="row">
                <view class="star-rating">
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                </view>
                <view class="processing"
                >
                  <progress
                      :percent="performanceScore.proportionOfScore[2]"
                      stroke-width="6"
                      border-radius="3"
                  />
                </view>
              </view>
              <view class="row">
                <view class="star-rating">
                  <img src="../../static/star.png" alt=""/>
                  <img src="../../static/star.png" alt=""/>
                </view>
                <view class="processing"
                >
                  <progress
                      :percent="performanceScore.proportionOfScore[1]"
                      stroke-width="6"
                      border-radius="3"
                  />
                </view>
              </view>
              <view class="row">
                <view class="star-rating">
                  <img src="../../static/star.png" alt=""/>
                </view>
                <view class="processing"
                >
                  <progress
                      :percent="performanceScore.proportionOfScore[0]"
                      stroke-width="6"
                      border-radius="3"
                  />
                </view>
              </view>
            </view>
          </view>
          <view class="moreMsg">
            <view class="collect">
              <view class="title">
                <view class="text">想看人数</view>
                <view class="percent">超过86%同类演出</view>
              </view>
            </view>
            <view class="people-num">
              {{ performanceInfo.wannaCount }}
              <view class="text">人</view>
            </view>
            <view class="navbar">
              <view class="current" @click="scrollToElement('info')">详情</view>
              <view @click="scrollToElement('notice')">须知</view>
              <view @click="scrollToElement('evaluate')">评价</view>
              <view @click="scrollToElement('recommend')">推荐</view>
            </view>
          </view>
          <view class="partition">
            <!-- 详情-->
            <view id="info" class="infoBox">
              <!-- 作者介绍-->
              <view class="partTitle"> 厂牌/主创</view>
              <view
                  class="performerInfo"
                  v-if="
                  performanceInfo.performerList !== undefined &&
                  performanceInfo.performerList.length === 1
                "
              >
                <view class="single">
                  <view class="avatar">
                    <img
                        :src="performanceInfo.performerList[0].performerAvatar"
                    />
                  </view>
                  <view class="intro">
                    <view class="name">
                      {{ performanceInfo.performerList[0].performerName }}
                    </view>
                    <view class="introInfo">
                      {{ performanceInfo.performerList[0].performerProfile }}
                    </view>
                  </view>
                </view>
              </view>
              <view class="performerInfo" v-else>
                <scroll-view class="multi" scroll-x="true">
                  <view
                      class="info"
                      v-for="(item, index) in performanceInfo.performerList"
                      :key="index"
                  >
                    <view class="avatar">
                      <img :src="item.performerAvatar"/>
                    </view>
                    <view class="name">
                      {{ item.performerName }}
                    </view>
                    <view class="intro">
                      {{ item.performerProfile }}
                    </view>
                  </view>
                </scroll-view>
              </view>

              <view class="partTitle"> 演出介绍</view>
              <view class="partContainer">
                <rich-text :nodes="performanceInfo.performanceInfo"></rich-text>
              </view>
            </view>
            <!-- 须知-->
            <view id="notice" class="noticeBox">
              <view class="partTitle"> 购票须知</view>
              <view class="partContainer">
                <view class="title"> 限购规则</view>
                <view class="content">
                  每笔订单最多购买6张、每个账号最多购买6张。
                </view>
                <view class="title"> 退票/换票规则</view>
                <view class="content">
                  本项目支持有条件退款，若需要收取退票手续费，将以用户实际支付票款为基准收取。基于项目主办方提供的退票政策不同，具体可支持用户申请退款的情形请详见该项目详情页退票政策相关说明或公告。
                </view>
                <view class="title"> 入场规则</view>
                <view class="content">
                  支持多种票品验票后入场，如证件电子票。
                </view>
                <view class="title"> 儿童购票</view>
                <view class="content"> 儿童一律凭票入场.</view>
                <view class="title"> 实名购票规则</view>
                <view class="content">
                  一张门票对应一个证件；证件支持：身份证/台湾居民来往大陆通行证/港澳台居民居住证/护照/外国人永久居留身份证/港澳居民来往内地通行证
                </view>
              </view>
            </view>
            <!-- 评分-->
            <view id="evaluate" class="commentBox">
              <view class="partTitle"> 评价</view>
              <view class="partContainer">
                <view class="tit">观众热评</view>
                <view class="commentList">
                  <view v-for="(item,index) in commentPreviewList" :key="index" class="comment-item">
                    <view class="left">
                      <view
                          class="avatar"
                          :style="'background-image: url(' + item.avatarUrl + ')'"
                      ></view>
                    </view>
                    <view class="right">
                      <view class="userName">{{ item.nickname }}
                        <uni-tag text="我" class="tag" custom-style="padding: 1px 2px;" type="warning"
                                 v-if="isMy(item)"></uni-tag>
                        <uni-tag text="已买票" class="tag" custom-style="padding: 1px 2px;" type="success"
                                 v-if="item.isBuy"></uni-tag>
                        <uni-tag text="未买票" class="tag" custom-style="padding: 1px 2px;" type="default "
                                 v-else></uni-tag>
                      </view>
                      <view class="star">
                        推荐
                        <uni-rate
                            :touchable="false"
                            :value="item.evaluationScore"
                            @change="onChange"
                            size="14"
                        />
                        <view class="comment-date">
                          {{ format2CommentStandardDateStr(item.updateTime) }}
                        </view>
                      </view>
                      <view class="comment">{{ item.commentContent }}</view>
                    </view>
                  </view>
                </view>
                <view v-if="commentCount !== 0" class="showMore" @click="toComment()">
                  全部{{ commentCount }}条评论
                </view>
                <view v-else class="showMore" @click="toComment()">
                  暂无评论 快来评论吧~
                </view>
              </view>
            </view>
            <!-- 推荐-->
            <view id="recommend" class="recommendBox">
              <view class="partTitle"> 推荐</view>
              <concertList
                  :concertList="recommendList"
              ></concertList>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="footer-box" v-show="!hideBottom">
      <view class="iconBox" @click="doWanna(0)" v-if="isWanna">
        <img class="iconImg" src="../../static/love.png" alt=""/>
        <view class="text">想看</view>
      </view>
      <view class="iconBox" @click="doWanna(1)" v-else>
        <img class="iconImg" src="../../static/love1.png" alt=""/>
        <view class="text">想看</view>
      </view>

      <button class="shareBtn" open-type="share" @click="share">分享</button>
      <button
          :disabled="performanceInfo.performanceStatus !== 1"
          @click="openPop"
          class="buyBtn"
      >
        {{
          performanceInfo.performanceStatus === 1
              ? "立即购买"
              : valueOf(performanceInfo.performanceStatus).chineseName
        }}
      </button>
    </view>
    <uni-popup
        ref="popup"
        @change="popChange"
        background-color="#fff"
        type="bottom"
    >
      <view class="pop">
        <view class="popTitle">选择场次</view>
        <view class="sessionView">
          <view class="sessionSelect">
            {{ formatDateTime2WeekDate(performanceInfo.showTime) }}
          </view>
        </view>
        <view class="popTitle"> 选择票面</view>
        <view class="tips"> 根据所选票面随机分配座位</view>
        <view class="ticketSelectView">
          <view
              class="ticketSelect"
              :class="{
              selected:
                null !== checkedTicket &&
                checkedTicket.ticketId === item.ticketId,
            }"
              v-for="(item, index) in ticketList"
              :key="index"
              @click="doTicketChecked(item)"
          >
            <view class="ticketName">
              {{ item.ticketName }}
            </view>
            <view v-if="item.ticketDiscount !== 100" class="ticketExtraInfo">
              {{ discountPercentage(item.ticketDiscount) }}
            </view>
          </view>
        </view>
        <!--选择票数量-->
        <view class="checkedCount">
          <view class="left">
            <view class="title"> 选择数量</view>
            <view class="tips"> 本演出最多购买6张票</view>
          </view>
          <view class="right">
            <Count
                class="count"
                :min="1"
                :max="6"
                v-model="checkedTicketCount"
            ></Count>
            <view class="tips">同一订单三张以及以内保证连座</view>
          </view>
        </view>
        <!--价格与确认-->
        <view class="priceSubmit">
          <view class="left">
            <view class="price">
              <span
                  style="
                  font-size: 13px;
                  display: inline-block;
                  margin-right: 5px;
                "
              >票款:</span
              >
              <span v-if="null === checkedTicket" class="smallFont">
                请选择票面</span
              >
              <span
                  v-if="
                  null !== checkedTicket && checkedTicket.ticketDiscount !== 100
                "
                  class="smallFont"
                  style="text-decoration: line-through"
              >{{
                  parseInt(checkedTicket.ticketPrice) * checkedTicketCount
                }}</span
              >
              <span v-if="null !== checkedTicket" class="priceFont">{{
                  parseInt(checkedTicket.ticketDiscountPrice) * checkedTicketCount
                }}</span>
              <span v-if="null !== checkedTicket" class="smallFont">元</span>
            </view>
            <view v-if="null !== checkedTicket" class="one">
              <span class="smallFont"
              >{{ parseInt(checkedTicket.ticketDiscountPrice) }}元/张</span
              >
            </view>
          </view>
          <view class="right">
            <button @click="submit" class="submitBtn">确定</button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {getPerformanceInfo, getRecommendPerformance, wannaPerformance} from "../../api/user/concert";
import {getPerformanceScore, getPreviewCommentList,} from "../../api/user/comment";
import {format2CommentStandardDateStr, formatDateTime2WeekDate,} from "../../utils/DateUtils";
import store from "../../store";
import {valueOf} from "../../utils/PerformanceStatusUtil";
import {getTicketList} from "../../api/user/ticket";
import Count from "../../uni_modules/count/Count.vue";
import {discountPercentage} from "../../utils/price";
import concertList from "../../uni_modules/uni-badge/components/concert-list/concert-list.vue";

export default {
  components: {concertList, Count},
  data() {
    return {
      performanceInfo: {},
      performanceId: "",
      hideBottom: false,
      ticketList: [],
      checkedTicket: null,
      checkedTicketCount: 1,
      performanceScore: {},
      commentPreviewList: [],
      commentCount: 0,
      recommendList: [],
      id: '',
    };
  },
  onShow() {
    let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    let curParam = routes[routes.length - 1].options; //获取路由参数
    this.performanceId = curParam.performanceId;
    console.log(this.performanceId)
    this.init();
    // 查询演出评分信息
    this.getPerformanceScore();
    // 查询评论preview
    this.getCommentPreview();
    // 查询推荐列表
    this.getRecommendPerformance();
  },
  methods: {
    discountPercentage,
    valueOf,
    formatDateTime2WeekDate,
    format2CommentStandardDateStr,
    getRecommendPerformance() {
      getRecommendPerformance(this.performanceId).then((res) => {
        this.recommendList = res.data;
      });
    },
    getPerformanceScore() {
      getPerformanceScore(this.performanceId).then((res) => {
        this.performanceScore = res.data;
      });
    },
    getCommentPreview() {
      getPreviewCommentList(this.performanceId).then((res) => {
        this.commentPreviewList = res.data.rows;
        this.commentCount = res.data.total;
      });
    },
    init() {
      getPerformanceInfo(this.performanceId).then((res) => {
        this.performanceInfo = res.data;
        this.performanceInfo.performanceInfo =
            this.performanceInfo.performanceInfo.replace(
                /\<img/gi,
                '<img style="max-width:100%;height:auto" '
            ); //正则替换
      });
    },
    scrollToElement(id) {
      this.id = id;
    },
    toComment() {
      uni.navigateTo({
        url: `/subpkg/comment/comment?performanceId=${this.performanceId}&performanceTitle=${this.performanceInfo.performanceTitle}`,
        fail(error) {
          console.log(error);
        },
      });
    },
    doWanna(like) {
      wannaPerformance({
        performanceId: this.performanceInfo.performanceId,
        isLike: like,
      }).then((res) => {
        if (res.success) {
          if (like === 1) {
            ++this.performanceInfo.wannaCount;
            store.commit("userDoWanna", this.performanceInfo.performanceId);
          } else {
            --this.performanceInfo.wannaCount;
            store.commit("userRemoveWanna", this.performanceInfo.performanceId);
          }
        } else {
          wx.showToast({
            title: res.message,
            icon: "error",
            duration: 2000,
          });
        }
      });
    },
    share() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "http://uniapp.dcloud.io/",
        title: "uni-app分享",
        summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
        imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });
    },
    openPop() {
      getTicketList(this.performanceInfo.performanceId).then((res) => {
        if (res.success) {
          this.ticketList = res.data;
          this.hideBottom = true;
          this.$refs.popup.open("bottom");
        }
      });
    },
    // 打开被隐藏的底部按钮
    popChange(isOpen) {
      if (!isOpen.show) {
        this.hideBottom = false;
      }
    },
    isMy(item) {
      return this.$store.state.loginUserInfo.userId == item.userId;
    },
    doTicketChecked(item) {
      this.checkedTicket = item;
    },
    submit() {
      if (this.checkedTicket === null) {
        wx.showToast({
          title: "请选择票面!",
          icon: "error",
          duration: 2000,
        });
        return;
      }
      uni.navigateTo({
        url: `/subpkg/order-create/order-create?ticketId=${this.checkedTicket.ticketId}&count=${this.checkedTicketCount}`,
        fail(error) {
          console.log(error);
        },
      });
    },
  },
  computed: {
    isWanna() {
      return this.$store.state.userWannaPerformanceIds.includes(
          this.performanceInfo.performanceId
      );
    },
  },
};
</script>

<style lang="scss">
.page {
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 150upx);
}

.partition {
  margin-top: 10px;
  width: 100%;

  .partTitle {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 12px;
    margin-top: 12px;
  }

  .performerInfo {
    .single {
      display: flex;
      text-align: center;
      align-items: center; /* 垂直方向上居中对齐 */
      height: 60px;
      padding: 5px;

      .avatar {
        height: 60px;
        margin-right: 20px;

        img {
          border-radius: 50%;
          height: 60px;
          width: 60px;
        }
      }

      .intro {
        display: flex;
        flex-direction: column;
        text-align: left; /* 左对齐 */
        .name {
          font-weight: bold;
          margin-bottom: 5px;
        }

        .introInfo {
          font-size: 12px;
          color: #9594aa;
        }
      }
    }

    .multi {
      height: 120px;
      width: 100%;
      white-space: nowrap; /* 防止换行 */

      .info {
        display: inline-block; /* 使每个 .info 元素在同一行显示 */
        vertical-align: top; /* 使元素顶部对齐 */
        height: 120px;
        width: 120px;
        text-align: center; /* 水平居中对齐 */

        .avatar {
          height: 80px;

          img {
            border-radius: 50%;
            height: 80px;
            width: 80px;
          }
        }

        .name {
          font-weight: bold;
          font-size: 12px;
          margin-bottom: 1px;
        }

        .intro {
          font-size: 10px;
          color: #9594aa;
          white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 超出部分隐藏 */
          text-overflow: ellipsis; /* 显示省略号以指示被隐藏的文本 */
        }
      }
    }
  }

  .partContainer {
    width: 100%;

    .title {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .content {
      color: #a6a6a6;
      font-size: 12px;
      margin-bottom: 15px;
    }
  }

  .infoBox {
    background-color: white;
    margin-top: 10px;
    padding: 10px 10px;
  }

  .noticeBox {
    background-color: white;
    margin-top: 10px;
    padding: 10px 10px;
  }

  .commentBox {
    background-color: white;
    margin-top: 10px;
    padding: 10px 10px;

    .partContainer {
      .tit {
        font-weight: 600;
        font-size: 16px;
      }

      .commentList {
        margin-top: 10px;

        .comment-item {
          display: flex;
        }

        .left {
          width: 13%;
          padding: 2px;

          .avatar {
            // background-size: contain;
            background-color: #e486b5;
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
          }
        }

        .right {
          padding: 0px 5px;
          width: 75%;
          border-bottom: 1px solid #efefef;

          .userName {
            font-size: 17px;
            line-height: 28px;

            .tag {
              margin-left: 10rpx;
            }
          }

          .star {
            display: flex;
            font-size: 12px;
            align-items: flex-start;

            .uni-rate {
              margin-left: 2px;
            }

            .comment-date {
              margin-left: 3px;
            }
          }

          .comment {
            padding: 10px 0;
            letter-spacing: 2rpx;
            font-size: 14px;
          }
        }
      }

      .showMore {
        width: 100%;
        font-size: 14px;
        color: rgb(34, 161, 220);
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    }
  }

  .recommendBox {
    background-color: white;
    margin-top: 10px;
    padding: 10px 10px;
  }
}

.detail-container {
  height: 100%;
  box-sizing: border-box;
  width: 100%;

  .top-blank {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 15px;
    background-color: #d4237a;
  }

  .main-container {
    position: relative;
    top: 3px;
    overflow: hidden;
    border-radius: 15px;
    background-color: #efefef;
    width: 100%;

    .keyMsg {
      background-color: white;
      box-sizing: border-box;
      padding: 8px 15px;
    }
  }
}

.flexbox {
  display: flex;
  justify-content: space-between;
}

.concert-introdBox {
  width: 100%;

  .poster {
    height: 150px;
    width: 170px;
    border-radius: 5%;
    overflow: hidden;

    .imgUrl {
      width: 100%;
      height: 100%;
    }
  }

  .introduction {
    position: relative;
    margin-left: 10px;
    width: 80%;

    .intro-text {
      font-weight: 600;
      font-size: 16px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
    }

    .discount {
      padding: 1px 3px;
      border-radius: 5px;
      display: inline-block;
      font-size: 12px;
      margin-top: 10px;
      color: white;
      background-color: #ee4269;
    }

    .sold-status {
      margin-top: 10px;
    }

    .price {
      position: absolute;
      bottom: 0px;
      font-size: 20px;
      color: #d4237a;
    }
  }

  .beginTime {
    display: flex;

    .icon {
      margin-right: 5px;
      width: 20px;
      height: 20px;

      .iconUrl {
        width: 100%;
        height: 100%;
      }
    }

    color: #474546;
    font-size: 14px;
    font-weight: bold;
    margin-top: 20px;
    padding: 10px 0px;
    border-bottom: 1px solid #efefef;
  }
}

.address-box {
  padding: 10px 0px;
  border-bottom: 1px solid #efefef;

  .areaName {
    display: flex;
    color: #474546;
    font-size: 14px;
    font-weight: bold;

    .icon {
      margin-right: 5px;
      width: 22px;
      height: 22px;

      .iconUrl {
        width: 100%;
        height: 100%;
      }
    }
  }

  .detail {
    margin-top: 5px;
    color: #7a7a7a;
    font-size: 14px;
  }
}

.serve-notice {
  display: flex;
  justify-content: start;
  width: 100%;
  height: 36px;
  // background-color: pink;
  line-height: 45px;
  font-size: 14px;

  .ntxt {
    margin: 0 5px;
  }

  .icon {
    margin: 0 3px;
    width: 14px;
    height: 14px;
  }
}

.rate-box {
  display: flex;
  justify-content: start;
  padding: 20px 15px;
  background-color: white;
  margin-top: 10px;
  width: 100%;
  height: 65px;

  .left {
    height: 100%;
    width: 18%;
    height: 100%;
    font-size: 12px;

    .scoreBox {
      float: right;
      font-size: 30px;
      align-items: center;
      text-align: center;
    }
  }

  .right {
    height: 100%;
    width: 60%;

    .row {
      display: flex;
      width: 100%;
      height: 15px;

      .star-rating {
        display: flex;
        flex-direction: row-reverse;
        width: 65px;
        height: 12px;

        img {
          width: 12px;
          height: 100%;
        }
      }

      .processing {
        margin-top: 4px;
        width: 75%;
        height: 100%;
      }
    }
  }
}

.moreMsg {
  padding: 10px 15px;
  background-color: white;
  margin-top: 10px;
  width: 100%;
  // height: 200px;
  .collect {
    width: 100%;
  }

  .title {
    display: flex;
    justify-content: space-between;
    width: 93%;

    .text {
      font-weight: bold;
    }

    .percent {
      color: #7a7a7a;
    }
  }
}

.people-num {
  margin-top: 6px;
  font-size: 36px;
  color: #f5812e;

  .text {
    display: inline-block;
    font-size: 16px;
    padding: 0 5px;
  }
}

.navbar {
  width: 93%;
  margin-top: 20px;
  font-size: 18px;
  display: flex;
  justify-content: space-around;
  color: #7a7a7a;
  font-weight: 500;

  .current {
    color: black;
  }
}

.footer-box {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0px;
  z-index: 999;
  background-color: #ffffff;
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
}

.iconBox {
  margin-right: 15px;
  width: 40px;
  height: 45px;

  .iconImg {
    width: 70%;
    height: 55%;
  }

  .text {
    padding: 0 3px;
    font-size: 12px;
  }
}

.shareBtn {
  margin-right: 15px;
  height: 50px;
  width: 90px;
  border-radius: 40px;
  background-color: #ffffff;
  border: 1px solid #d4237a;
  color: #d4237a;
}

.buyBtn {
  height: 50px;
  width: 190px;
  border-radius: 40px;
  background: linear-gradient(to right, #cb257f, #d82d45);
  border: 1px solid #d4237a;
  color: #ffffff;
}

.pop {
  height: 450px;
  background-color: white;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;

  .popTitle {
    font-size: 15px;
    font-weight: bold;
    height: 5%;
    margin-bottom: 3px;
  }

  .tips {
    font-size: 10px;
    font-weight: normal;
    color: #95949d;
  }

  .sessionView {
    margin-bottom: 20px;
    height: 10%;

    .sessionSelect {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      display: inline-block;
      padding: 10px;
      color: #d92d3e;
      border: 1px solid #d92d3e;
      border-radius: 5px;
    }
  }

  .ticketSelectView {
    margin-bottom: 10px;
    height: 40%;

    .checkedTicket {
      background-color: #f8e8ec;
      color: #de2d3e;
    }

    .ticketSelect {
      margin-top: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      display: inline-block;
      background-color: #f6f6f6;
      padding: 12px 16px;
      border-radius: 6px;

      .ticketName {
        display: inline-block;
        font-size: 14px;
      }

      .ticketExtraInfo {
        margin-left: 5px;
        padding: 2px;
        display: inline-block;
        font-size: 12px;
        background: linear-gradient(to bottom right, #d77c93, #de9b54);
        color: white;
        border-radius: 3px;
      }
    }

    .ticketSelect.selected {
      background-color: #f8e8ec; /* 选中时的背景颜色 */
    }

    .ticketSelect.selected .ticketName {
      color: #d92d3e; /* 选中时的文字颜色 */
    }
  }

  .checkedCount {
    display: flex;
    justify-content: space-between;
    padding: 8px 6px;
    border-top: 1px solid #eaeaeb;
    border-bottom: 1px solid #eaeaeb;
    height: 10%;

    .left {
      .title {
        margin-bottom: 6px;
      }
    }

    .right {
      display: flex;
      flex-direction: column; /* 垂直方向布局 */
      .count {
        margin-left: auto;
        margin-bottom: 6px;
      }

      .tips {
        color: #d95800;
      }
    }
  }

  .priceSubmit {
    display: flex;
    width: 100%;
    padding: 8px 6px;
    height: 10%;
    position: relative;

    .smallFont {
      font-size: 11px;
      color: #95949d;
    }

    .left {
      width: auto;
      display: flex;
      flex-direction: column; /* 垂直方向布局 */

      .priceFont {
        margin: 0 3px;
        font-size: 17px;
        font-weight: 600;
        color: #d92d3e;
        letter-spacing: -1.5px;
      }

      .one {
        margin-left: auto;
      }
    }

    .right {
      width: 65%;
      position: absolute;
      right: 0;

      .submitBtn {
        margin-left: 4%;
        width: 92%;
        height: 40px;
        border-radius: 40px;
        background: linear-gradient(to right, #cb257f, #d82d45);
        color: #ffffff;
      }
    }
  }
}
</style>



